<script lang="ts" setup>
import type { DialogModel } from '@/index.d';

const dialogModel = defineModel<DialogModel<object>>('dialogModel', {
  required: true
});

const emit = defineEmits<{
  (e: 'submit'): void;
}>();

const headText = computed<string>(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return `查看${dialogModel.value.title}`;
    case 'insert':
      return `新增${dialogModel.value.title}`;
    case 'update':
      return `修改${dialogModel.value.title}`;
  }
});

const fullScreen = ref<boolean>(false);

const changeFullScreen = () => (fullScreen.value = !fullScreen.value);
</script>
<template>
  <el-dialog
    v-model="dialogModel.visible"
    draggable
    destroy-on-close
    :show-close="false"
    :close-on-click-modal="false"
    :fullscreen="fullScreen"
    width="60%"
    top="100px"
    v-bind="$attrs"
  >
    <template #header>
      <div class="hq-dialog-header">
        <div>
          <slot name="header"> {{ headText }}</slot>
        </div>
        <div>
          <svg-icon v-if="fullScreen" name="modelFullscreenClose" @click="changeFullScreen" />
          <svg-icon v-else name="modelFullscreenOpen" @click="changeFullScreen" />
        </div>
      </div>
    </template>
    <template #default>
      <div style="height: 800px">
        <slot></slot>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="success" @click="emit('submit')" v-if="dialogModel.type !== 'view'">
          确认
        </el-button>
        <el-button type="danger" @click="dialogModel.visible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog {
  .hq-dialog-header {
    display: flex;
    justify-content: space-between;
  }
}
</style>
